<template>
    <div class="user">
        <div class="search">
            <div>
                <el-button type="primary" plain icon="el-icon-plus" @click="newadd">新增</el-button>
            </div>
        </div>
        <div style="width:100%;">
            <el-table :data="userList"  border style="width: 100%">
                <el-table-column type="index" label="序号" align="center" width="200"/>
                <el-table-column  prop="nick"  label="昵称" ></el-table-column>
                <el-table-column  prop="phone"  label="手机号"></el-table-column>
                <el-table-column  prop="address"  label="地址"></el-table-column>
                <el-table-column  label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text">编辑</el-button>
                        <el-button @click="handleClick1(scope.row)" type="text" >绑定地址</el-button>
                        <el-button @click="handleMenu(scope.row)" type="text" >绑定菜单</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
<!-- 新增 -->
        <el-dialog class="Padding" title="新增" :visible.sync="masknumb" width="600px" append-to-body :closeOnClickModal="false" :before-close="cancel">
            <div class="contentadd">
                 <ul class="info">
                    <li class="item">
                        <span  style="margin-right:5px;">用户名</span>
                        <el-input v-model="username" placeholder="请输入内容" style="width:360px;margin-top:40px;"></el-input>
                    </li>
                     <li >
                        <span  style="margin-right:20px;">密码</span>
                        <el-input v-model="password" placeholder="请输入内容" style="width:360px;margin-top:40px;"></el-input>
                    </li>
                    <li>
                         <span style="margin-right:20px;">地址</span>
                         <el-input v-model="address" placeholder="请输入内容" style="width:360px;margin-top:40px;"></el-input>
                    </li>
                    <li >
                         <span style="margin-right:20px;">昵称</span>
                         <el-input v-model="nick" placeholder="请输入内容" style="width:360px;margin-top:40px;"></el-input>
                    </li>
                    <li >
                         <span style="margin-right:5px;">手机号</span>
                         <el-input v-model="phone" placeholder="请输入内容" style="width:360px;margin-top:40px;"></el-input>
                    </li>
                </ul>
            </div>
						<div slot="footer" class="dialog-footer">
								<el-button type="primary"  style="margin-right:10px;" @click="determineb" icon="el-icon-finished">确定</el-button>
								<el-button @click="cancel">取消</el-button>
						</div>
        </el-dialog>
 <!-- 编辑        -->
        <el-dialog class="Padding" title="编辑" :visible.sync="masknum" width="600px" append-to-body :closeOnClickModal="false" :before-close="cancelClick">
            <div class="contenta">
                <ul class="content-items">
                    <li class="item">
                        <span>昵称</span>
                        <input type="text" v-model="editList.nick" style="width:300px;">
                    </li>
                    <li class="item">
                        <span>手机号</span>
                        <input type="text" v-model="editList.phone" style="width:300px;">
                    </li>
                      <li class="item">
                        <span>地址</span>
                        <input type="text" v-model="editList.address" style="width:300px;">
                    </li>
                </ul>
            </div>
						<div slot="footer" class="dialog-footer">
								 <el-button type="primary" @click="determine" icon="el-icon-finished">确定</el-button>
                 <el-button @click="cancelClick">取消</el-button>
						</div>
        </el-dialog>
<!-- 绑定地址  -->
        <el-dialog class="Padding" title="绑定地址" :visible.sync="masknuma" width="600px" append-to-body :closeOnClickModal="false" :before-close="cancelClick1">
            <div class="content contentaddr">
                <ul class="content-items">
                    <li class="item" style="padding-right:160px;">
                        <span>地址:</span>
													<el-tree :data="arraddressList" 
																	:props="defaultProps" 
																	@node-click="handleNodeClick" 
																	:load="loadNode" lazy
                      						check-strictly
																	node-key='id'
																	show-checkbox
																	ref="CheckChange"
                      						@check='clickbox'
																	>
													</el-tree>

                    </li>
                </ul>
            </div>
						<div slot="footer" class="dialog-footer">
								<el-button type="primary" @click="determinea" icon="el-icon-finished">确定</el-button>
								<el-button  @click="cancelClick1">取消</el-button>
						</div>
        </el-dialog>
<!-- 添加或修改部门对话框 -->
        <el-dialog :title="Menutitle" :visible.sync="MenuDialog" width="600px" append-to-body :closeOnClickModal="false" :before-close="Menucancel">
						<el-form ref="form" :model="MenuForm" :rules="rules" label-width="80px">
								<el-row>
										<el-col :span="24">
												<el-form-item label="用户ID" prop="userid">
														<el-input v-model="MenuForm.userid" placeholder="请输入菜单名称" style="width:80%;"/>
												</el-form-item>
										</el-col>
										<el-col :span="24">
												<el-form-item label="菜单" prop="menuid">
														<el-tree
																class="tree-border"
																:data="menuOptions"
																show-checkbox
																ref="menu"
																node-key="id"
																empty-text="加载中，请稍后"
																default-expand-all
																:props="MenudefaultProps"
														></el-tree>
												</el-form-item>
										</el-col>
								</el-row>
						</el-form>
						<div slot="footer" class="dialog-footer">
								<el-button type="primary" @click="submitForm" icon="el-icon-finished">确 定</el-button>
								<el-button @click="Menucancel">取 消</el-button>
						</div>
        </el-dialog>
    </div>
</template>

<script>
// import myTree from "@/components/assembly/tree.vue";

export default {
	components: {},
    data(){
        return{
           username:'',
           address:'',
           nick:'',
           password:'',
           token:'',
            id:'',
            userId:'',
            phone:'',
            inputValue1:'',
            userListAll:[],
            userList: [],
            masknum:false,
            masknuma:false,//绑定地址
            masknumb:false,//新增弹框
            editList:'',//修改页面的数据
            options:'',//修改页面的数据
            currentPage:1,
            total: 0,
            page: 1,
            pageSize: 5,
            pid:0,
            arraddressList:[],
            defaultProps: {
                children: 'children',
                label: 'name',
                isLeaf:true
            },
            num:0,
						userId:'',//绑定地址-当前行用户id
          	deptId:'',//选中id-绑定地址
//菜单表单
            MenuForm:{
                menuid: undefined,
                userid: undefined,
            },
            deptIds: [],//选中菜单id数组
            Menutitle:'',
            MenuDialog:false,
            // 菜单列表
            menuOptions: [],
            MenudefaultProps: {
                children: "Menu",
                label: "name"
            },
            rules:{},
        }
    },
    mounted(){
        this.token=sessionStorage.getItem('token')
        this.getUserList()
    },
    methods:{
        //获取地址数据
        getArr(){
			this.axios.post('/monitor/Sys/dept/getpid?pid='+this.pid).then(res=>{
				if(res.status==200){
					this.arraddressList=res.data.data
				}else{
                    this.$message.error(res.data.msg);
				}
			})
		},
        loadNode(node, resolve){
            if(node.level==0){
                return resolve(node.data)
            }
            setTimeout(()=>{
                resolve(node.data.children);
            },500)
        },
          determineb() {//新增-确定
            //   this.masknumb=false;
               var obj={
                    username: this.username,
                    address: this.address,
                    nick: this.nick,
                    phone: this.phone,
                    password:this.password,
               }
                if(this.username&&this.address&&this.phone&&this.nick&&this.password){
                   this.axios({
                        url:'/monitor/Sys/user/save',
                        method:'post',
                        data:obj,
                        headers:{Authorization:this.token}
                    })
                    .then((res) => {
                        if (res.status == 200) {
                            this.$message({ type: "success", message: "提交成功!",});
              							this.masknumb=false;
														this.getUserList()
														this.cancel()
                        } else {
                            this.$message.error(res.status.error);

                        }
                    });
               }else{
                     this.$message.error('输入框不能为空');
               }
                
            },
						cancel() {//新增-取消
								this.username='',
								this.password='',
								this.address='',
								this.nick='',
								this.phone='',
								this.masknumb=false;
         		},
        dg(){
            if(this.pid!=0){
                this.axios.post('/monitor/Sys/dept/getpid?pid='+this.pid).then(res=>{
                    if(res.status==200){
                        this.foreachFunc(this.arraddressList,res.data.data)
                        // this.$forceUpdate()
                        // console.log('地址数组',this.arraddressList)
                    }else{
                        this.$message.error(res.status.error);
                    }
                })
            }
        },
        foreachFunc(arr,children){
            var that=this
            arr.forEach(function(e,index){
                if(e.id==that.pid){
                    e.children=children
                }else{
                    that.foreachFunc(e.children,children)
                }
            })
				},
				clickbox(node, tree) {
					if (tree.checkedKeys.length == 0) {
						this.$refs.CheckChange.setCheckedKeys([]);
						this.node = node;
						this.nodeisChecked = false;
					} else {
						this.$refs.CheckChange.setCheckedKeys([]);
						this.$refs.CheckChange.setCheckedKeys([node.id]);
						this.node = node;
						this.nodeisChecked = true;
					}
						this.deptId = node.id
						// console.log(	this.deptId,'	this.deptId');
				},
        //树形回调
        handleNodeClick(data) {
            this.pid=data.id
            this.dg()
        },
        // 获取用户列表
        getUserList(){
            this.axios({
                url:'/monitor/Sys/user/getUser',
                method:'get',
                headers:{Authorization:this.token}
            }).then(res=>{
                // console.log('用户列表',res.data)
                if(res.status==200){
                    this.userListAll=res.data.data
                    this.userList=this.userListAll.slice((this.page-1)*this.pageSize,this.page*this.pageSize)
                    this.total=this.userListAll.length
                    // console.log(res.data.data,111111111111111111)
                }else{
                    this.$message.error(res.status.error);
                }
            })
        },
        determine() {//编辑-确定
            this.masknum=false;
            var obj={
                address: this.editList.address,
                id: this.editList.id,
                nick: this.editList.nick,
                password:this.editList.password,
                phone:this.editList.phone,
                username:this.editList.username
            }
            this.axios({
                url:'/monitor/Sys/user/update',
                method:'post',
                data:obj,
                headers:{Authorization:this.token}
            }).then((res) => {
            if (res.status == 200 ) {
                // console.log(res.status);
                this.masknum = false
                this.$message({ type: "success", message: "提交成功!",});
            } else {
                this.$message.error(res.status.error);
            }
            });
        },
        determinea(){//绑定地址-确定
             var obj={
							//  deptId: this.pid,
               deptId:this.deptId,//地址id
               userId:this.userId
            }
            this.axios({
                url:'/monitor/Sys/useranddept/save',
                method:'post',
                data:obj,
                headers:{Authorization:this.token}
            }).then((res) => {
            if (res.status == 200) {
                // console.log(res.status);
                this.masknuma = false;//绑定地址
                this.$message({ type: "success", message: "提交成功!",});
            } else {
                this.$message.error(res.status.error);
            }
            });
        },
        // 查询
        search(){
            // this.axios({
            //     url:'',
            //     method:'post',
            //     data:inputValue1,
            //     headers:{Authorization:this.token}
            // }).then(res=>{
            //     console.log('查询成功',res.data)
            //     if(res.status==200){
            //         this.userList=res.data.data
            //     }else{
            //         alert(res.data.msg);
            //     }
            // })
        },
        //新增
        newadd() {
              this.masknumb=true;
            // this.$router.push('/index/useradd')
        },
        handleSizeChange(val) {//分页
            this.pageSize = val;
            this.userList=this.userListAll.slice((this.page-1)*this.pageSize,this.page*this.pageSize)
            this.total=this.userListAll.length
        //   this.getUserList();
        },
        handleCurrentChange(val) {//分页
            this.page = val;
            this.userList=this.userListAll.slice((this.page-1)*this.pageSize,this.page*this.pageSize)
            this.total=this.userListAll.length
        //   this.getUserList();
        },
        handleClick(obj){//编辑
           this.masknum=true;
           this.editList=obj
        },
         cancelClick(){//编辑取消
						this.masknum = false;
						this.getUserList()
         },
        handleClick1(row){//编辑地址
           this.masknuma=true;
           this.userId = row.id
           this.getArr()
         },
         cancelClick1(){
            this.masknuma=false;
            // history.go(0)
         },
          // 所有菜单节点数据
        getMenuAllCheckedKeys() {
            // 目前被选中的菜单节点
            let checkedKeys = this.$refs.menu.getCheckedKeys();
            console.log(checkedKeys,'checkedKeys');
            // 半选中的菜单节点
            // let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
            // checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
            // console.log(halfCheckedKeys,'半选');
            return checkedKeys;
        },
        handleMenu(row){//绑定菜单
            this.MenuForm.userid = row.id//用户id
            this.Menutitle = '绑定菜单'
            this.MenuDialog = true;
            this.axios.get('/monitor/Sys/Menu/getMenu').then(res => {//菜单树形接口
                this.menuOptions = res.data.data;
            });
        },
        submitForm(){
            this.deptIds = this.getMenuAllCheckedKeys();
            this.MenuForm.menuids = this.deptIds
            console.log( this.deptIds, this.MenuForm,'选中');
            // menuid
             this.axios({url:'/monitor/Sys/Menu/setMenu',method:'post',data:this.MenuForm,}).then(res => {
              this.$message({ type: "success", message: "绑定成功!",});
              this.MenuDialog = false;
              this.getList();
            });
        },
         // 取消按钮
        Menucancel() {
            this.MenuDialog = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.MenuFrm = {
                menuid: '',
                userid: '',
            };
        },
            
    },
    watch:{
    }
}
</script>

<style scoped>
.user{
    min-height: calc(100% - 80px);
    position: relative; 
    min-width: calc(100% - 204px);
    margin-bottom: 50px;
}
.search{
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.search-top{
    display: flex;justify-content: left;
}
.pagination{
    position: absolute;
    bottom: -20px;
}

/* 遮罩层 */
.Padding >>> .el-dialog__body{ 
	padding: 0px 20px;
}
.mask {
  width: 100vw;
  height: 100vh;
  /* color: #555; */
  background: rgba(51, 51, 51, 0.692);
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
}

.mask .content {
  width: 600px;
  height: 300px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 30PX;
}
.mask .contentaddr{
    width: 500px;
    height: 70%;
    overflow: auto;
}
.mask .contentadd{
 width: 600px;
  height: 600px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 30PX;
}
.info{
    padding-left: 50px;
}
.mask .contenta {
  width: 600px;
  height: 400px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 30PX;
}

.mask .content-top {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}

.mask .content-top img {
  width: 25px;
}

.content-items {
  margin: 40px 0 0 40px;
}

.content-items .item {
  margin: 12px 10px;
  display: flex;
  align-items: center;
}

.content-items .item span:first-child {
  display: inline-block;
  width: 100px;
}
.content-bottom{
  margin: 90px 0 0 90px;

}
</style>
<style>
.el-table .cell, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell {
    text-align: center;
}
</style>